<template>
	<view>
		<!-- 		首页 -->
		<view class="content">
			<text class="index-txt">首页</text>
			<image class="index-img" src="../../static/tabBar/position.png" mode="aspectFit" @tap="jumpTourist">
			</image>
		</view>
		<!-- 		搜索 -->
		<view class="input-box">
			<icon class="search" type="search" color="#999999" size="22"></icon>
			<input class="int-search" type="text" placeholder="韩国" />
		</view>
		<!-- 		卡片横线滚动框 -->
		<view class="recommend">
			<scroll-view scroll-x show-scrollbar>
				<view class="recommend-list">
					<navigator class="recommend-item" @click="jumprecommend" v-for="(item, index) in recommend"
						:key="index">
						<image :src="item.url" class="recommend-img"></image>
						<text class="recommend-txt">{{item.name}}</text>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<!-- 		每日推荐 -->
		<view class="every">
			<text class="every-title">每日推荐</text>
			<view class="everyCardmore">
				<text class="every-txt">查看更多</text>
				<image class="everyimg" src="../../static/images/card-shouye/path_u327.png" mode=""></image>
			</view>
		</view>
		<view class="everyCard">
			<scroll-view scroll-x show-scrollbar>
				<view class="everyCard-list">
					<navigator class="everyCard-item" @tap="jumpeveryCard" v-for="(item, index) in hotRecommend"
						:key="index">
						<view class="zhezhao"></view>
						<image :src="item.url" class="everyCard-img"></image>
						<view class="text-box">
							<view class="everyCard-txt">{{item.name}}</view>
							<view class="everyCard-small-txt">
								<image class="everyCard-position" src="../../static/images/card-shouye/shape_u264.png"
									mode=""></image>
								<text class="city">{{item.distance}}</text>
								<text class="load">景点</text>
							</view>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<!-- 		热门景点 -->
		<view class="every">
			<text class="every-title">热门景点</text>
			<view class="everyCardmore">
				<text class="every-txt">查看更多</text>
				<image class="everyimg" src="../../static/images/card-shouye/path_u327.png" mode=""></image>
			</view>
		</view>
		<view class="everyCard">
			<scroll-view scroll-x show-scrollbar>
				<view class="everyCard-list">
					<navigator class="everyCard-item" @click="jumpeveryCard" v-for="(item, index) in hotRecommend"
						:key="index">
						<view class="zhezhao"></view>
						<image :src="item.url" class="everyCard-img"></image>
						<view class="text-box">
							<view class="everyCard-txt">{{item.name}}</view>
							<view class="everyCard-small-txt">
								<image class="everyCard-position" src="../../static/images/card-shouye/shape_u264.png"
									mode=""></image>
								<text class="city">{{item.distance}}</text>
								<text class="load">景点</text>
							</view>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recommend: [{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					}
				],
				hotRecommend: [{
						name: "印度尼西亚",
						distance: "259",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/image_u258.png?sign=e37cc82c173b4f37faad9f78f25ef1c1&t=1637740603"
					},
					{
						name: "挪威",
						distance: "86",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/image_u266.png?sign=d891622e4f8ee0a0644809570b43397b&t=1637740589"
					},
					{
						name: "济州岛",
						distance: "25",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/image_u273.png?sign=0c184b4439b547ba339fbc55442648ed&t=1637740116"
					},
					{
						name: "济州岛",
						distance: "25",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/image_u273.png?sign=0c184b4439b547ba339fbc55442648ed&t=1637740116"
					}
				]
			}
		},
		onLoad() {
			// this.getRecommendDataByMini()
		},
		methods: {
			jumpTourist: function() {
				uni.navigateTo({
					url: '/pages/Tourist/Tourist'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		color: #FFFFFF;
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.index-txt {
		font-size: 80rpx;
		margin-left: 20rpx;
	}

	.index-img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.input-box {
		width: 710rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		margin: 5rpx auto;
		border-radius: 10rpx;
		border: 1rpx solid #000000;
		box-sizing: border-box;
	}

	.search {
		margin-left: 30rpx;
	}

	.int-search {
		padding: 10rpx;
	}

	.recommend {
		width: 750rpx;
		height: 170rpx;
		display: flex;
	}

	.recommend-list {
		width: 1200rpx;
		justify-content: space-around;
		display: flex;
		flex-wrap: wrap;
	}

	.recommend-item {
		margin: 10rpx;
		position: relative;
		width: 256rpx;
		height: 144rpx;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 5rpx #888888;
	}

	.recommend-img {
		width: 256rpx;
		height: 144rpx;
	}

	.recommend-txt {
		position: absolute;
		left: 85rpx;
		top: 43rpx;
		height: 40rpx;
		font-style: normal;
		font-size: 12px;
		color: #FFFFFF;
		line-height: 20px;
	}

	.every {
		margin: 20rpx;
		width: 710rpx;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.every-title {
		font-size: 60rpx;
	}

	.everyCardmore {
		display: flex;
		align-items: center;

	}

	.every-txt {
		color: #008dd3;
	}

	.everyimg {
		width: 30rpx;
		height: 30rpx;
	}

	.everyCard {
		display: flex;
	}

	.everyCard-list {
		width: 1450rpx;
		height: 460rpx;
		justify-content: space-around;
		display: flex;
	}

	.zhezhao,
	.everyCard-img,
	.everyCard-item {
		margin: 0 10rpx;
		width: 320rpx;
		height: 426rpx;
		position: relative;
	}

	.zhezhao {
		position: absolute;
		opacity: 0.3;
		background: linear-gradient(to bottom, #fff 0%, #000000 70%, );
		z-index: 3;
	}

	.text-box {
		width: 200rpx;
		position: absolute;
		flex-wrap: wrap;
		left: 30rpx;
		bottom: 20rpx;
		z-index: 4;
	}

	.everyCard-position {
		width: 16rpx;
		height: 22rpx;
	}

	.everyCard-txt {
		color: #fff;
		font-size: 40rpx;
	}

	.everyCard-small-txt {
		color: #fff;
		font-size: 30rpx;
	}

	.everyCard-position,
	.city,
	.load {
		margin: 0 5rpx;
	}
</style>
